<!-- 个人修改界面 -->
<template>
  <div style="display: flex">
    <el-card class="box-card">
      <span style="font-size: 30px">
        {{ type ? '设置新昵称' : '请设置新密码' }}
      </span>
      <el-form :model="form" :rules="rules" style="width: 40%; margin: 30px">
        <el-form-item prop="name">
          <template #label>
            <span>用户名</span>
          </template>
          <template #default>
            <el-input v-model="form.name" disabled />
          </template>
        </el-form-item>
        <!-- 修改昵称 -->
        <el-form-item prop="name" v-show="type">
          <template #label>
            <span>修改昵称</span>
          </template>
          <template #default>
            <el-input v-model="form.nickname" />
          </template>
        </el-form-item>
        <!-- 原密码 -->
        <el-form-item prop="password" v-show="!type">
          <template #label>
            <span>原密码:</span>
          </template>
          <template #default>
            <el-input
                placeholder="请输入原密码"
                v-model="form.oldPassword"
                show-password
            ></el-input>
          </template>
        </el-form-item>
        <!-- 修改密码 -->
        <el-form-item prop="password" v-show="!type">
          <template #label>
            <span>新密码:</span>
          </template>
          <template #default>
            <el-input
                placeholder="请输入新密码"
                v-model="form.newPassword"
                show-password
            ></el-input>
          </template>
        </el-form-item>
        <!-- 提交表单按钮 -->
        <el-button type="primary" size="large" @click="submitForm">
          <span>提交</span>
        </el-button>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <!-- 头像 -->
      <el-upload-plus />
      <h1>
        Hi,{{ userStore.UserInfo.userName }}
        <el-button type="success" link @click="type = !type">修改</el-button>
      </h1>

      <div>
        <el-icon><Lock /> </el-icon>
        <el-icon><User /> </el-icon>
        <el-icon><More /></el-icon>
        <el-icon><More /></el-icon>
        <el-icon><User /> </el-icon>
      </div>
      <div style="color: rgb(169, 172, 173)">
        {{ userStore.UserInfo.email }}
      </div>
      <el-divider />
      <div
          style="display: flex; justify-content: space-between; font-size: small"
      >
        <span>帮助中心</span>
        <span>更多></span>
      </div>
      <div style="text-align-last: left; margin-top: 20px">
        <div style="margin: 15px 0">
          <el-button :icon="Search" round text bg> 如何注销账号? </el-button>
        </div>
        <div style="margin: 15px 0">
          <el-button :icon="Search" round text bg>
            申诉未通过怎么办?
          </el-button>
        </div>
        <div style="margin: 15px 0">
          <el-button :icon="Search" round text bg>
            遇到风险，如何冻结?
          </el-button>
        </div>
        <div style="margin: 15px 0">
          <el-button :icon="Search" round text bg> 如何申诉? </el-button>
        </div>
      </div>
      <el-divider />
      <div
          style="display: flex; justify-content: space-between; font-size: small"
      >
        <span>反馈意见</span>
        <span>反馈></span>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useUserStore, useTokenStore } from '@/stores/index'
import instance from '@/util/api'
import { updateUserPwd, updateUserInfo, getUserInfo } from '@/request/usr'
import { useRouter } from 'vue-router'
import ElUploadPlus from '@/components/el-upload-plus.vue'
import { ElMessage } from 'element-plus'
const router = useRouter()
const userStore = useUserStore()
const tokenStore = useTokenStore()
//表单
const form = ref({
  name: userStore.UserInfo.nickName,
  nickname: userStore.UserInfo.userName,
  oldPassword: '',
  newPassword: ''
})

const type = ref(false)
//个人用户基本数据获取数据
getUserInfo(useUserStore().UserInfo.userId).then((res) => {
  userStore.setUserInfo(res)
})
//提交表单
const submitForm = () => {
  if (type.value === false) {
    if (form.value.newPassword.length < 6) {
      ElMessage.error('密码长度不能小于6位')
      return
    }
    //发修改密码请求
    updateUserPwd(
        useUserStore().UserInfo.userId,
        form.value.oldPassword,
        form.value.newPassword
    ).then((res) => {
      console.log(res)
      // @ts-ignore
      if (res.code === 200) {
        router.push('/login')
      }

      //更新
      // getUserInfo(localStorage.getItem('userId')).then((res) => {
      //   userStore.setUserInfo(res)
      // })
    })
  } else {
    //发修改昵称请求
    updateUserInfo(userStore.UserInfo.userId, form.value.nickname).then(() => {
      //更新
      instance.defaults.headers.common['Authorization'] = tokenStore.getToken()
      getUserInfo(useUserStore().UserInfo.userId).then((res) => {
        userStore.setUserInfo(res)
      })
    })
  }
}
//表单校验
const rules = ref({
  oldPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
  ]
})
</script>

<style lang="scss" scoped>
.box-card {
  margin-top: 15px;
  height: calc(100vh - var(--head-height) - 40px);
  border-radius: 25px;
}
.box-card:first-child {
  width: 100%;
}
.box-card:last-child {
  margin-left: 3%;
  width: 40%;
  text-align-last: center;
}
</style>
